// @import "weatherNav";
.content-box{
    display: flex;
    flex-direction: column;
}
.main-content-box{
    flex: 1;
    display: flex;
    .center-box{
        flex: 4;
        display: flex;
        flex-direction: column;
        margin:0 10px;

        .map-box{
            flex: 3;
            display: flex;
            flex-direction: column;
            margin-bottom:10px;
            margin-top:10px;

            h4{
                color: #fff;
                margin: 20px 0 12px;
                padding-left: 20px;
                font-size: 18px;
            }
            .info-box{
                display: flex;
                text-align: center;
                >div{
                    flex: 1;
                    p{
                        color: #fff;
                        font-size: 18px;
                        font-weight:bold;
                    }
                    .numberStyle{
                        margin: 10px 0 ;
                    }
                    // i{
                    //     display: flex;
                    //     justify-content: center;
                    //     align-items: flex-end;
                    //     margin: 10px 0;
                    //     font-size: 38px;
                    //     font-weight: bold;
                    //     color: #FFF000;
                    //     span{
                    //         width:28px;
                    //         height:46px;
                    //         margin: 3px;
                    //         background:rgba(64,127,255,0.2);
                    //         border-radius:4px;
                    //         line-height:46px;
                    //     }
                    // }
                }
            }
            .map{
                flex: 1;
            }
        }
        .ranking-info{
            flex: 1;
            display: flex;
            flex-direction: column;
            padding:0 10px;
            background-image: -moz-linear-gradient( 90deg, rgba(126,165,243,.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgba(126,165,243,0.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);
  background-image: -ms-linear-gradient( 90deg, rgba(126,165,243,0.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 50%;
                    margin: 4px 0;
                    color: #fff;
                    font-size: 12px;
                    line-height: 18px;
                    i{
                        display: inline-block;
                        width:18px;
                        height:18px;
                        text-align: center;
                        border-radius:50%;
                        color: #14C6CA;
                    }
                    &:first-child{
                        i{
                            color: #fff;
                            background:rgba(255,170,37,1);
                        }
                    }
                    &:nth-child(2){
                        i{
                            color: #fff;
                            background:#FFAA25;
                        }
                    }
                    &:nth-child(3){
                        i{
                            color: #fff;
                            background:#14C6CA;
                        }
                    }
                }
            }
        }
    }
    .left-box,.right-box{
        display: flex;
        flex-direction: column;
        >div{
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 10px;
        }
    }
    .selling-box{
        ul{
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-around;
            color: #fff;
            li{
                display: flex;
                flex: 1;
                flex-direction: column;
                padding:0 20px ;
                justify-content: space-evenly;
            
            }
            p{
                margin-bottom: 16px;
                font-size: 12px;
                span{
                    margin-right: 30px;
                }
            }
            i{
                display: flex;
                justify-content: space-between;
                width: 100%;
                font-size: 12px;
                color:#2fe6fc;
            }
        }
    }
}
.echarts-box{
    flex: 1;
}

.radio-box{
    display: flex;
    justify-content: space-around;
    position: relative;
    margin: 0 20px;
    color: #fff;
    &::before{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 12px;
        z-index: 0;
        height: 1px;
        background: #14C6CA;
    }
    input{
        display: none;
    }
    label{
        display: flex;
        flex-direction: column;
        align-items: center;
        i{
            position: relative;
            z-index: 2;
            width:8px;
            height:8px;
            margin: 8px 0;
            background:rgba(255,255,255,1);
            border-radius:50%;
        }
    }
    input:checked + label {
        color: #14C6CA;
        i{
            width:16px;
            height:16px;
            margin: 4px 0;
            background:rgba(20,198,202,1);
        }
    }
}